<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>编辑个人信息 - 活力长者社区</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
        }

        .profile-header {
            margin-bottom: 30px;
        }

        .profile-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .form-label {
            font-weight: 500;
        }

        .btn-save {
            background-color: #28a745;
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
        }

        .btn-save:hover {
            background-color: #218838;
            color: white;
        }

        .btn-cancel {
            background-color: #6c757d;
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .btn-cancel:hover {
            background-color: #5a6268;
            color: white;
        }
    </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="profile-container">
    <div class="profile-header">
        <h2>编辑个人信息</h2>
        <p class="text-muted">更新您的个人资料和联系方式</p>
    </div>

    <c:if test="${not empty error}">
        <div class="alert alert-danger">${error}</div>
    </c:if>

    <form action="UpdateProfileServlet" method="post">
        <div class="profile-card">
            <h3 class="card-title">基本信息</h3>
            <div class="mb-3">
                <label class="form-label">真实姓名</label>
                <input type="text" class="form-control" name="realName"
                       value="${memberInfo.memberDetail.realName}" required>
            </div>
            <div class="mb-3">
                <label class="form-label">性别</label>
                <div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="male"
                               value="男" ${memberInfo.memberDetail.gender == '男' ? 'checked' : ''}>
                        <label class="form-check-label" for="male">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="female"
                               value="女" ${memberInfo.memberDetail.gender == '女' ? 'checked' : ''}>
                        <label class="form-check-label" for="female">女</label>
                    </div>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">出生日期</label>
                <input type="date" class="form-control" name="birthDate"
                       value="${memberInfo.memberDetail.birthDate}">
            </div>
            <div class="mb-3">
                <label class="form-label">身份证号</label>
                <input type="text" class="form-control" name="idCard"
                       value="${memberInfo.memberDetail.idCard}" required>
            </div>
            <div class="mb-3">
                <label class="form-label">联系电话</label>
                <input type="tel" class="form-control" name="phone"
                       value="${memberInfo.memberDetail.phone}" required>
            </div>
        </div>

        <div class="profile-card">
            <h3 class="card-title">紧急联系人</h3>
            <div class="mb-3">
                <label class="form-label">联系人姓名</label>
                <input type="text" class="form-control" name="contactName"
                       value="${memberInfo.memberDetail.contactName}">
            </div>
            <div class="mb-3">
                <label class="form-label">联系电话</label>
                <input type="tel" class="form-control" name="contactPhone"
                       value="${memberInfo.memberDetail.contactPhone}">
            </div>
        </div>

        <div class="d-flex justify-content-end mt-4">
            <a href="ViewProfileServlet" class="btn btn-cancel">取消</a>
            <button type="submit" class="btn btn-save">保存更改</button>
        </div>
    </form>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>